<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Robot AI 智能语音助手</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        .chat-container {
            max-height: 400px;
            overflow-y: auto;
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 10px;
        }
        .status-container {
            min-height: 40px;
            margin-bottom: 15px;
            color: #6c757d;
        }
        .user-message {
            text-align: right;
            margin: 5px 0;
        }
        .user-message span {
            background-color: #007bff;
            color: white;
            border-radius: 18px;
            padding: 8px 15px;
            display: inline-block;
            max-width: 80%;
        }
        .system-message {
            text-align: left;
            margin: 5px 0;
        }
        .system-message span {
            background-color: #e9ecef;
            color: #212529;
            border-radius: 18px;
            padding: 8px 15px;
            display: inline-block;
            max-width: 80%;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center mb-4">Robot AI 智能语音助手</h1>
        
        <div class="row">
            <div class="col-md-8 offset-md-2">
                <!-- 连接状态 -->
                <div class="alert alert-info mb-3" id="connectionStatus">
                    WebSocket未连接
                </div>
                
                <!-- 聊天记录 -->
                <div class="chat-container" id="chatContainer">
                    <div class="system-message">
                        <span>你好，我是小智，有什么可以帮你的？</span>
                    </div>
                </div>
                
                <!-- 状态更新 -->
                <div class="status-container" id="statusContainer">
                </div>
                
                <!-- 输入区域 -->
                <div class="input-group mb-3">
                    <input type="text" id="messageInput" class="form-control" placeholder="输入你的问题...">
                    <button class="btn btn-primary" id="sendButton">发送</button>
                </div>
                
                <!-- 示例问题 -->
                <div class="card mt-3">
                    <div class="card-header">
                        示例问题
                    </div>
                    <div class="card-body">
                        <button class="btn btn-outline-secondary me-2 mb-2" onclick="appendExample('一分公司今年火警次数是多少？')">
                            一分公司今年火警次数是多少？
                        </button>
                        <button class="btn btn-outline-secondary me-2 mb-2" onclick="appendExample('二分公司五月维保情况')">
                            二分公司五月维保情况
                        </button>
                        <button class="btn btn-outline-secondary me-2 mb-2" onclick="appendExample('三分公司去年的火警次数')">
                            三分公司去年的火警次数
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- WebSocket依赖 -->
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1.6.1/dist/sockjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
    <!-- 客户端JS -->
    <script src="js/websocket-client.js"></script>
    
    <script>
        let client;
        
        document.addEventListener('DOMContentLoaded', function() {
            // 创建WebSocket客户端
            client = new RobotWebSocketClient('http://localhost:8080/iff');
            
            // 连接状态元素
            const connectionStatus = document.getElementById('connectionStatus');
            const statusContainer = document.getElementById('statusContainer');
            const chatContainer = document.getElementById('chatContainer');
            const messageInput = document.getElementById('messageInput');
            const sendButton = document.getElementById('sendButton');
            
            // 尝试连接
            try {
                client.connect();
                connectionStatus.innerHTML = '正在连接...';
                connectionStatus.className = 'alert alert-warning mb-3';
                
                // 注册回调
                client.onStatus(function(status) {
                    // 显示状态更新
                    statusContainer.innerHTML = `<div class="text-secondary">${status.status}</div>`;
                });
                
                client.onResponse(function(response) {
                    // 清除状态
                    statusContainer.innerHTML = '';
                    
                    // 显示查询结果
                    if (response.success) {
                        appendSystemMessage(response.response);
                    } else {
                        appendSystemMessage(`错误: ${response.message}`);
                    }
                });
                
                client.onChat(function(chatResponse) {
                    // 清除状态
                    statusContainer.innerHTML = '';
                    
                    // 显示聊天结果
                    if (chatResponse.success) {
                        appendSystemMessage(chatResponse.response);
                    } else {
                        appendSystemMessage(`错误: ${chatResponse.message}`);
                    }
                });
                
                client.onError(function(error) {
                    // 显示错误
                    connectionStatus.innerHTML = '连接失败: ' + error;
                    connectionStatus.className = 'alert alert-danger mb-3';
                });
                
                // WebSocket连接成功
                setTimeout(function() {
                    if (client.connected) {
                        connectionStatus.innerHTML = 'WebSocket已连接';
                        connectionStatus.className = 'alert alert-success mb-3';
                    }
                }, 1000);
                
                // 发送按钮事件监听
                sendButton.addEventListener('click', function() {
                    sendMessage();
                });
                
                // 输入框回车事件
                messageInput.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        sendMessage();
                    }
                });
            } catch (error) {
                connectionStatus.innerHTML = '连接错误: ' + error;
                connectionStatus.className = 'alert alert-danger mb-3';
            }
        });
        
        // 发送消息函数
        function sendMessage() {
            const messageInput = document.getElementById('messageInput');
            const message = messageInput.value.trim();
            
            if (message && client.connected) {
                // 显示用户消息
                appendUserMessage(message);
                
                // 发送查询
                client.sendQuery(message);
                
                // 清空输入框
                messageInput.value = '';
            }
        }
        
        // 添加用户消息到聊天容器
        function appendUserMessage(message) {
            const chatContainer = document.getElementById('chatContainer');
            const messageDiv = document.createElement('div');
            messageDiv.className = 'user-message';
            messageDiv.innerHTML = `<span>${message}</span>`;
            chatContainer.appendChild(messageDiv);
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }
        
        // 添加系统消息到聊天容器
        function appendSystemMessage(message) {
            const chatContainer = document.getElementById('chatContainer');
            const messageDiv = document.createElement('div');
            messageDiv.className = 'system-message';
            messageDiv.innerHTML = `<span>${message}</span>`;
            chatContainer.appendChild(messageDiv);
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }
        
        // 添加示例问题到输入框
        function appendExample(example) {
            const messageInput = document.getElementById('messageInput');
            messageInput.value = example;
            messageInput.focus();
        }
    </script>
</body>
</html> 